import FileSaver from "file-saver";
import { requireImg } from "@/utils";
import { nextTick } from "vue";
/**
 * marker标签
 * @param data
 */
export const addMarker = async (data: any) => {
  await __g.marker.clear();
  let markerArr: any = [];
  data.forEach((item) => {
    let o = {
      id: item.id,
      groupId: "markerAdd",
      coordinate: eval(item.coordinate), //坐标位置
      coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
      range: [1, 10000000], //可视范围

      text: item.name, //显示的文字
      useTextAnimation: false, //关闭文字展开动画效果 打开会影响效率
      textRange: [1, 1000000], //文本可视范围[近裁距离, 远裁距离]
      textOffset: [0, 0], // 文本偏移
      textBackgroundColor: [0, 0, 0, 0.5], //文本背景颜色
      fontSize: 24, //字体大小
      fontOutlineSize: 1, //字体轮廓线大小
      fontColor: "#ffffff", //字体颜色
      fontOutlineColor: "#000000", //字体轮廓线颜色

      showLine: true, //标注点下方是否显示垂直牵引线
      lineSize: [2, 100], //垂直牵引线宽度和高度[width, height]
      lineColor: "#ffffff", //垂直牵引线颜色
      lineOffset: [0, 0], //垂直牵引线偏移

      autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
      autoHeight: false, // 自动判断下方是否有物体
      displayMode: 4, //智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
      clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
      priority: 0, //避让优先级
      occlusionCull: false, //是否参与遮挡剔除
    };

    markerArr.push(o);
  });

  await __g.marker.add(markerArr, null);
};

export const updateMarker = (markerInfo: any) => {
  __g.marker.update({
    id: markerInfo.id,
    text: markerInfo.name,
  });
};

export const clean = async () => {
  await __g.marker.clear();
};

export const saveAsJson = (data: any) => {
  const jsonStr = JSON.stringify(
    data.map((item: any) => ({ ...item, coordinate: eval(item.coordinate) })),
  );
  const blob = new Blob([jsonStr], { type: "text/json" });
  FileSaver.saveAs(blob, "marker点位.json");
};

let isAddListen = false;
let location: any = null;
export const createPeople = () => {
  __g.settings.setInteractiveMode(0);
  nextTick(() => {
    // 创建 img 元素
    const imgElement = document.createElement("img");

    const app = document.getElementById("app");
    if (location) {
      app.removeChild(location);
    }

    // 设置 img 元素的属性
    imgElement.src = requireImg("tools/location.png");
    imgElement.alt = "location";

    // 设置 img 元素的样式
    imgElement.style.width = "18px";
    imgElement.style.height = "23.5px";
    imgElement.style.position = "fixed";
    imgElement.style.top = "0px";
    imgElement.style.left = "0px";
    imgElement.style.zIndex = "100";

    location = imgElement;
    // 将 img 元素添加到容器中
    app.appendChild(location);
    addListener();
  });
};

export const destroyPeople = () => {
  const videoDom = document.querySelector("#player video") as HTMLElement;
  videoDom.removeEventListener("mousemove", handlerMouseMove);
  __g.settings.setInteractiveMode(0);
  const app = document.getElementById("app");
  if (location != null) {
    app.removeChild(location);
  }

  isAddListen = false;
  location = null;
};

const addListener = () => {
  if (isAddListen) return;
  isAddListen = true;
  location.style.display = "block";
  const videoDom = document.querySelector("#player video") as HTMLElement;
  videoDom.addEventListener("mousemove", handlerMouseMove);
};

const handlerMouseMove = async (e: any) => {
  const { x, y } = e;
  nextTick(() => {
    const imgWidth = location.width;
    const imgHeight = location.height;
    location.style.top = y - imgHeight - 5 + "px";
    location.style.left = x - imgWidth / 2 + "px";
  });
};
